<template>
  <div>
    <h1>插槽使用回顾-父</h1>
    <!--
      插槽用法（3种）：
      1. 默认（匿名）插槽(一个)=》接收html或自定义组件渲染
      2. 具名插槽（多个）=》接收html或自定义组件渲染
      3. 作用域插槽=》传递（共享）子的数据
      为什么这么做？不写死，复用最大化

     -->
    <hr />
    <Child>
      <h3>123</h3>
      <p>789</p>
      <!-- <template #left="scope"> -->
      <template #left="{ obj }">
        <!-- <p>{{ scope }}</p> -->
        <ul>
          <li>{{ obj.name }}</li>
          <li>{{ obj.age }}</li>
          <li>index</li>
          <li>index</li>
        </ul>
      </template>
      <template #right="scope">
        <p>{{ scope }}</p>
        <ol>
          <li>12</li>
          <li>34</li>
        </ol>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from './components/child.vue'
export default {
  components: {
    Child
  },
  setup () {
    return {}
  }
}
</script>
